import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Modal, Button, Radio, Input, message } from 'antd';
import { auditProduct } from '@/api/product/index';
import { tracking } from '@/core/utils/operation'

const ProductAuditModal = ({ visible, item ,onClose, onSuccess }) => {
  const newItem = {...item}
  const [formData, setFormData] = useState({
    id: 0,
    product_name: '',
    product_out_id: 0,
    product_out_status: '',
    audit_memo: '',
    product_out_price: 0,
    product_out_audit_person: '',
    product_out_apply_person: '',
    product_in_warehouse_number: 0,
    product_single_price: 0,
    product_out_number: '',
    product_apply_time: ''
  });

  const name = JSON.parse(localStorage.getItem('userInfo')).name


  useEffect(() => {
    const handleApplyProductInfo = () => {
      const name = JSON.parse(localStorage.getItem('userInfo')).name
      setFormData({
        id: newItem.id,
        product_out_id: newItem.product_out_id,
        product_name: newItem.product_name,
        product_out_status: newItem.product_out_status,
        audit_memo: newItem.audit_memo,
        product_out_price: newItem.product_out_price,
        product_out_audit_person: name,
        product_out_apply_person: newItem.product_out_apply_person,
        product_in_warehouse_number: newItem.product_in_warehouse_number,
        product_single_price: newItem.product_single_price,
        product_out_number: newItem.product_out_number,
        product_apply_time: newItem.product_apply_time
      });
    };
    handleApplyProductInfo()
  }, []);

  const handleAuditProduct = async () => {
    console.log({...formData})
    const res = await auditProduct({ ...formData });
    if (res.status === 0) {
      message.success('审核产品成功');
      onSuccess();
      await tracking('产品', name, formData.product_name, '高级', '同意');
      onClose();
    } else {
      message.error('审核产品失败');
      onClose();
    }
  };

  return (
    <Modal
      title="审核产品"
      open={visible}
      onCancel={onClose}
      footer={null}
      width="30%"
      centered
      destroyOnClose
    >
      <div className="describe">确定审核此产品的出库吗？</div>
      <Radio.Group
        value={formData.product_out_status}
        onChange={(e) => setFormData({ ...formData, product_out_status: e.target.value })}
        className="ml-4"
      >
        <Radio value="同意" size="large">同意</Radio>
        <Radio value="否决" size="large">否决</Radio>
      </Radio.Group>
      <Input.TextArea
        placeholder="请输入审核备注"
        value={formData.audit_memo}
        onChange={(e) => setFormData({ ...formData, audit_memo: e.target.value })}
        rows={4}
        style={{ marginTop: '10px' }}
      />
      <div className="dialog-footer" style={{ marginTop: '20px' }}>
        <Button type="primary" onClick={handleAuditProduct}>
          确定
        </Button>
      </div>
    </Modal>
  );
};

ProductAuditModal.propTypes = {
  visible: PropTypes.bool.isRequired,
  item: PropTypes.object.isRequired,
  onClose: PropTypes.func.isRequired,
  onSuccess: PropTypes.func.isRequired,
};

export default ProductAuditModal;
